<template>
  <div class="payment wrapper_1200">
    <div class="orderTip">
      <div>訂單提交成功！去付款咯~</div>
      <div class="times acea-row row-middle">
        <div>剩余時間：</div>
        <countDown :is-day="false" :tip-text="' '" :day-text="' '" :hour-text="' 小时 '" :minute-text="' 分钟 '"
          :second-text="'秒 '" :datatime="orderDetail.stop_time"></countDown>
      </div>
    </div>
    <div class="detail">
      <div class="item">訂單编号：{{ orderId }}</div>
      <div class="item">
        訂單價格：<span>{{ orderDetail.pay_price }}元</span>
      </div>
      <div class="item line1" v-if="!orderDetail.virtual_type">
        收貨信息：{{ orderDetail.real_name }} {{ orderDetail.user_phone }}
        {{ orderDetail.user_address }}
      </div>
      <div class="item line1">
        商品名稱：{{
          orderDetail.cartInfo.length
            ? orderDetail.cartInfo[0].productInfo.store_name
            : ""
        }}
      </div>
    </div>
    <div class="payType">
      <div class="title">選擇以下支付方式</div>
      <div class="type acea-row row-middle">
        <div v-if="orderDetail.yue_pay_status == 1" class="item acea-row row-center-wrapper"
          :class="current === 0 ? 'on' : ''" @click="currentPay(0)">
          <div class="iconfont icon-yue"></div>
          <div>
            <div class="name">余額支付</div>
            <div class="yue">余額：{{ userInfo.now_money }}</div>
          </div>
          <div class="iconfont icon-xuanzhong4 font-color" v-if="current === 0"></div>
        </div>
        <div v-if="orderDetail.pay_weixin_open" class="item acea-row row-center-wrapper"
          :class="current === 1 ? 'on' : ''" @click="currentPay(1)">
          <div class="iconfont icon-ai-weixin"></div>
          <div>
            <div class="name">微信支付</div>
          </div>
          <div class="iconfont icon-xuanzhong4 font-color" v-if="current === 1"></div>
        </div>
        <div v-if="orderDetail.ali_pay_status" class="item acea-row row-center-wrapper"
          :class="current === 2 ? 'on' : ''" @click="currentPay(2)">
          <div class="iconfont icon-zhifubao"></div>
          <div>
            <div class="name">支付寶支付</div>
          </div>
          <div class="iconfont icon-xuanzhong4 font-color" v-if="current === 2"></div>
        </div>
        <div class="item acea-row row-center-wrapper" :class="current === 3 ? 'on' : ''" @click="currentPay(3)">
          <svg t="1753496443182" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="4508" width="400" height="400">
            <path
              d="M229.643 233.89c-26.054 3.28-52.107 24.846-60.636 49.688-5.683 15.47-107.536 454.219-108.005 462.19-0.949 22.968 12.314 39.844 34.104 44.064 8.055 1.874 266.703 1.874 275.232 0 24.631-4.69 47.843-23.908 56.372-47.345 3.316-8.906 108.48-456.093 108.48-463.595 1.422-21.096-11.372-38.44-31.738-44.533-4.739-0.934-262.912-1.874-273.81-0.47z"
              fill="#E60012" p-id="4509"></path>
            <path
              d="M470.762 233.89c-26.054 3.28-52.107 24.846-60.632 49.688-5.214 15.47-107.534 454.219-107.534 462.19-0.95 22.968 12.314 39.844 34.108 44.064 8.05 1.874 266.698 1.874 275.227 0 24.635-4.69 47.847-23.908 56.372-47.345 3.317-8.906 108.479-456.093 108.479-463.595 1.424-21.096-11.366-38.44-31.736-44.533-5.214-0.934-263.387-1.874-274.284-0.47z"
              fill="#00508E" p-id="4510"></path>
            <path
              d="M722.308 233.89c-26.054 3.28-52.112 24.846-60.637 49.688-5.209 15.47-107.534 454.219-107.534 462.19-0.945 22.968 12.32 39.844 34.108 44.064 8.055 1.874 200.383 1.874 208.908 0 24.634-4.69 47.847-23.908 56.372-47.345 3.316-8.906 108.484-456.093 108.484-463.595 1.418-21.096-11.371-38.44-31.743-44.533-4.734-1.404-220.748-2.343-231.645-0.934h23.687v0.465z"
              fill="#00908C" p-id="4511"></path>
            <path
              d="M221.589 376.39c0 0.47-0.476 3.282-1.42 6.095-10.896 36.562-21.793 85.781-20.37 91.874 3.79 18.283 30.793 16.876 40.266-2.343 2.842-5.154 23.212-90.936 23.212-97.028 0-0.47 32.212 0 32.212 0.464 0 0 0 1.408-0.475 2.817-0.474 1.403-5.683 21.091-11.366 44.529-12.795 49.688-14.213 54.842-20.845 64.686-21.793 31.878-94.746 30.94-100.429-1.404-1.422-7.032 14.213-88.124 21.32-110.159 0-1.403 37.895-0.469 37.895 0.47z m484.139 0c21.79 4.69 28.42 22.03 18.472 47.816-9.947 25.78-31.262 37.028-68.686 37.028-11.371 0-10.423-1.874-17.529 33.282-1.419 6.562-2.841 12.656-2.841 13.594-0.476 2.343-34.11 2.343-33.635 0 28.426-120.468 30.793-130.78 30.793-131.72l0.474-1.402h34.104c27.003 0.464 34.583 0.464 38.848 1.403z m-292.282 46.408c4.735 0.938 8.05 4.69 8.05 7.97 0 11.717-24.16 19.688-33.16 10.779-8.525-8.905 9.475-22.5 25.11-18.75z m-83.849 8.904c0 0.94-0.474 2.817-0.474 4.22l-0.474 1.878 5.683-2.816c15.16-7.497 29.844-6.094 34.583 3.281 2.841 5.629 2.367 8.91-5.21 43.595-1.422 6.094-3.315 14.534-3.79 18.748-1.897 9.38-0.474 8.91-17.528 8.91-14.687 0-14.687 0-14.212-1.408 0-0.938 1.896-8.435 3.79-17.345 7.58-33.277 8.055-37.967 1.422-37.967-3.79 0-9.004 2.343-9.473 3.75-0.948 3.282-9.478 44.06-9.952 47.812l-0.945 4.22-14.687 0.938c-17.998 0.47-16.58 1.873-12.79-14.064 5.21-20.626 8.055-35.154 9.949-48.28 2.367-14.063 0.948-12.655 14.212-14.532 6.158-0.94 12.315-1.874 14.213-2.343 4.735-1.409 5.683-0.94 5.683 1.403z m225.014-0.464c0 0.933-0.474 2.811-0.474 4.216l-0.476 2.346 5.688-2.816c29.37-14.998 40.737-2.813 32.212 35.628-1.893 8.436-4.265 20.623-5.683 26.25-0.949 6.094-2.372 11.248-2.842 11.717-1.898 1.874-29.844 1.41-29.375 0 0-0.938 1.898-8.435 3.791-16.875 8.056-34.216 8.056-38.436 0.949-38.436-5.683 0-8.525 1.873-9.473 6.092-1.424 5.155-8.53 38.906-9.475 45l-0.948 5.158-14.687 0.47c-17.999 0.465-16.58 2.342-12.316-15.003 4.74-18.75 8.056-36.094 10.423-48.749 1.893-12.187 0.474-10.782 12.315-12.656 5.213-0.938 11.846-1.878 14.214-2.342 4.738-2.348 6.157-1.878 6.157 0z m287.547-0.47c1.892 28.592 2.368 37.028 2.368 37.498 0 0.47 4.264-7.032 8.999-16.406 9.473-18.749 7.58-16.876 18.002-18.28 2.842-0.469 8.525-1.409 12.79-2.342 10.423-1.878 10.423-2.817-1.423 17.81-16.105 27.658-38.368 66.564-46.423 80.627-24.157 43.591-24.157 43.591-44.527 44.06l-12.316 0.47 0.945-3.282c0.474-1.873 1.897-5.623 2.37-8.435l1.42-5.159h3.79c4.265 0 5.209-0.94 9-7.502 1.423-2.342 3.79-6.093 4.738-8.435 1.42-2.343 6.158-9.844 9.949-17.345l7.58-13.125-1.897-17.34c-2.367-20.158-5.209-44.065-6.631-51.097-0.95-6.562-0.95-6.562 7.58-7.5 3.79-0.466 9.948-1.874 13.264-2.343 8.999-2.812 9.947-2.812 10.422-1.874z m-357.183 0.47c36.476 6.562 23.686 69.37-16.106 78.28-27.003 6.094-45.475-4.22-45.475-24.847 0.47-36.093 27.472-59.53 61.58-53.433z m272.86 1.873c1.893 0.938 4.739 2.812 6.158 4.22 2.367 2.342 2.367 2.342 2.367 0.934 0.475-1.873 0-1.873 18.951-4.685 15.158-2.342 14.684-2.342 13.739 1.874-6.158 26.249-11.371 49.217-13.739 60.47-3.315 16.876-0.948 14.998-19.421 14.529h-15.635v-1.874c0-1.873-0.945-2.812-1.894-1.407-5.213 8.44-30.792 5.158-37.898-5.155-17.525-26.25 19.896-81.562 47.371-68.906z m-340.129 13.595s0 2.342-0.474 4.219c-3.786 14.999-10.418 45.469-11.842 51.092l-1.422 7.032-15.632 0.469c-18.472 0.47-17.528 1.404-13.738-9.843 3.316-10.783 6.633-23.908 8.53-37.972 1.892-12.186 0-10.313 13.738-12.186 6.157-0.94 12.79-1.873 14.208-2.342 3.79-0.939 6.158-0.939 6.632-0.47z m82.9 97.028c0 0.47-0.944 2.348-2.367 4.69-0.95 2.342-2.367 4.22-2.367 4.22 27.946 0.464 28.895 0.464 28.42 1.873l-5.209 16.876h-40.74l-2.367 1.873c-5.214 4.689-32.686 10.782-32.686 7.031l5.21-16.875h3.789c6.632 0 8.05-1.404 13.738-11.247l4.735-8.91c24.636-0.465 29.843 0 29.843 0.47z m62.06 0c0 0.47-0.475 2.812-1.424 5.629-0.948 2.342-1.417 4.685-1.417 5.154 0 0 2.366-0.94 5.207-3.28 10.423-7.033 19.422-8.437 45.95-8.437 10.423 0 19.422 0 19.896 0.465 0.475 0.939-15.156 51.565-17.528 56.25-3.316 6.098-6.633 9.379-11.84 11.721l-4.74 1.874-26.998 0.47-27.003 0.468-4.738 15.937c-9.474 30.47-9.474 28.128 4.264 26.72 10.897-0.94 10.423-1.873 7.107 9.374l-2.842 9.375h-13.738c-29.844 0.47-33.634-1.404-30.793-13.594 1.423-6.094 35.528-117.656 36.002-118.595 0.474-0.465 24.635-0.465 24.635 0.47z m124.584 0c0 0.47-0.474 1.877-0.944 3.75-1.423 4.69-1.423 4.69 4.735 1.41 8.054-4.221 27.002-5.629 65.845-5.629h12.32v5.629c0 6.562 0.475 7.03 6.158 7.966l4.264 0.469-2.372 8.44-2.366 8.435h-8.53c-21.789 0.47-25.104-1.873-25.58-14.528v-6.098l-1.418 4.22-1.423 4.69H733.2c-2.367 0-4.735 0-4.735 0.47 0 0-23.211 76.401-26.528 87.184-0.474 0.94 0 1.409 2.843 1.409 4.264 0 4.264 0 2.841 3.745-1.419 4.221-1.419 4.221 3.316 4.221 3.316 0 5.214-0.47 7.58-1.873 3.317-1.878 3.317-1.408 18.473-22.5l6.158-8.909h-12.79c-15.631 0-14.207 0.939-11.366-8.435l2.367-7.502h31.268c2.841-9.844 3.785-12.656 3.785-13.125 0-0.47-6.632-0.47-15.156-0.47h-15.158l4.735-16.875h42.633c23.212 0 42.638 0 42.638 0.47 0 0.469-0.948 4.22-2.37 8.44l-2.368 7.966-14.213 0.469-14.21 0.469c-2.37 7.032-3.315 10.313-3.789 11.252l-0.474 1.873h13.738c16.106 0 15.157-0.938 11.84 8.436l-2.367 7.501h-31.266l-4.735 5.624h12.316l1.892 11.252c1.898 12.656 1.898 12.656 8.055 12.656 4.74 0 4.74-0.94 1.424 10.312l-2.847 9.375h-8.999c-15.631 0-18.473-2.342-21.32-18.28l-1.418-10.313-5.683 7.502c-15.636 21.091-16.58 21.56-36.476 21.56-12.794 0-12.794 0-10.897-3.75 0.475-1.873 0.475-1.873-3.316-1.873-3.79 0-3.79 0-4.738 2.812l-0.475 2.811H666.88l0.474-1.408c1.424-4.684 3.79-4.215-25.105-4.215-25.109 0-26.527 0-26.053-1.409l2.368-8.435c2.841-8.44 2.367-8.44 5.209-8.44 2.37 0 2.37 0 3.315-3.281 22.268-73.592 29.374-97.03 30.319-100.31l1.897-6.094h13.264c8.525 0 14.682 0.465 14.682 0.934z m-168.167 40.314l-5.213 16.406h-28.42c-2.842 9.375-3.79 12.187-4.266 13.125-0.474 1.409 0.475 1.409 14.214 1.409 8.054 0 14.686 0.47 14.686 0.47 0 0.464-0.474 1.402-0.95 2.81-0.473 0.935-1.422 4.686-2.365 8.436l-1.898 6.093H475.5l-3.316 11.252c-4.738 15.937-4.264 16.406 13.738 14.064 7.581-0.939 7.107-1.877 3.79 9.375l-2.841 9.374h-19.9c-31.263 0-31.737-0.939-23.212-27.658 2.372-8.436 4.74-15.468 4.74-15.468s-3.317-0.47-8.056-0.47c-4.26 0-8.05 0-8.05-0.469 3.315-11.716 4.734-15.468 4.734-16.406 0.474-0.934 1.423-1.403 8.53-1.403h8.05l3.79-14.534h-7.576c-5.688 0-7.58 0-7.58-0.939 0-0.933 4.264-14.528 4.733-15.937 0.95-0.933 72.483-0.469 72.008 0.47z m91.9 33.752c0 0.938-0.949 3.75-1.42 6.093-2.846 13.125-6.631 15.937-21.792 16.875-5.209 0.47-9.948 0.938-9.948 0.938-0.949 1.405-0.949 12.657 0 14.53l1.423 1.877 9.473-0.47c5.21-0.469 9.474-0.469 9.474-0.469 0 0.939-5.21 17.345-5.684 17.81-0.948 0.94-29.843 0.47-33.634-0.934-5.683-1.878-5.683-1.409-5.214-30.94l0.476-25.78h24.16v9.844h4.74c5.208 0 5.682-0.47 8.05-7.033l1.422-3.75h9.475c8.524 0.47 9.473 0.47 8.999 1.409z m44.53-200.626l-5.213 22.5h7.107c36.476 0.938 51.637-40.784 16.105-43.596-5.684-0.47-10.893-0.939-11.367-0.939-1.422 0-1.422 1.41-6.631 22.035z m-188.542 31.874c-8.999 3.75-17.524 37.501-10.417 42.656 5.208 4.22 12.79-2.812 16.58-14.529 6.158-21.565 4.26-31.878-6.163-28.127z m282.339 2.342c-9.478 4.69-16.58 37.971-9.478 41.721 9.478 5.155 21.794-12.654 21.794-31.877 0-8.905-5.214-13.125-12.316-9.844zM557.927 562.957l-2.368 8.436c-1.422 4.22-2.367 7.97-2.841 8.435 0 0.47 2.367-0.465 5.683-2.343 9.473-4.685 12.316-5.623 26.053-6.092l11.846-0.47c1.893-5.623 2.368-7.966 2.368-8.435 0.474-0.47-40.267-0.47-40.741 0.47z m-8.05 27.185l-1.899 7.5 40.741-0.47 2.368-7.5c-32.212 0-41.21 0-41.21 0.47z m128.848-16.876c-1.896 6.097-3.315 10.782-2.841 10.782l5.683-1.873c2.842-0.94 8.055-2.347 10.897-2.812 2.841-0.469 5.209-0.94 5.683-0.94 0 0 4.74-14.532 4.74-15.001 0 0-4.74-0.465-10.423-0.465H682.04l-3.316 10.31z m-7.58 23.907c0 0.469-1.893 5.159-3.317 10.782-1.892 5.624-3.315 10.783-3.315 10.783 0 0.465 2.367-0.47 5.683-1.878 3.316-1.403 8.055-2.812 10.897-3.28 6.157-0.94 6.631-1.404 7.107-3.751 0.474-0.935 1.422-4.685 2.366-7.497l1.898-5.628H682.04c-5.683 0-10.897 0-10.897 0.469z m-16.58 53.908l20.845 0.47c4.264-14.064 5.683-18.754 5.683-19.223l-20.844-0.934-5.684 19.687z"
              fill="#FFFFFF" p-id="4512"></path>
          </svg>
          <div>
            <div class="name">銀聯支付</div>
          </div>
          <div class="iconfont icon-xuanzhong4 font-color" v-if="current === 3"></div>
        </div>
      </div>
      <div class="goPay acea-row row-right" v-if="current !== null">
        <div class="bnt bg-color" @click="goPay">去支付 </div>
      </div>
    </div>

    <!-- 货币选择弹窗 -->
    <div v-if="showCurrencyModal" class="currency-modal-overlay" @click="closeCurrencyModal">
      <div class="currency-modal" @click.stop>
        <div class="modal-header">
          <h3>选择结算货币</h3>
          <div class="close-btn" @click="closeCurrencyModal">×</div>
        </div>
        <div class="modal-body">
          <div class="currency-option" :class="{ active: tempCurrency === 'CNY' }" @click="selectCurrency('CNY')">
            <div class="currency-info">
              <div class="currency-name">人民币 (CNY)</div>
              <div class="currency-desc">中国大陆地区标准货币</div>
            </div>
            <div class="currency-icon" v-if="tempCurrency === 'CNY'">✓</div>
          </div>
          <div class="currency-option" :class="{ active: tempCurrency === 'HKD' }" @click="selectCurrency('HKD')">
            <div class="currency-info">
              <div class="currency-name">港币 (HKD)</div>
              <div class="currency-desc">香港特别行政区法定货币</div>
            </div>
            <div class="currency-icon" v-if="tempCurrency === 'HKD'">✓</div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="cancel-btn" @click="closeCurrencyModal">取消</button>
          <button class="confirm-btn" @click="confirmCurrency" :disabled="!tempCurrency">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import countDown from "@/components/countDown";
export default {
  name: "payment",
  auth: "guest",
  components: {
    countDown,
  },
  data() {
    return {
      orderId: 0,
      orderDetail: {
        cartInfo: [],
      },
      current: null,
      userInfo: {},
      showCurrencyModal: false,
      selectedCurrency: '',
      tempCurrency: '',
      currentPaymentType: '' // 'wechat' 或 'alipay'
    };
  },
  async asyncData({ app, query }) {
    let [orderMsg, userInfoMsg] = await Promise.all([
      //获取banner分類
      app.$axios.get("/order/detail/" + query.result),
      app.$axios.get("/user"),
    ]);
    return {
      orderId: query.result,
      orderDetail: orderMsg.data,
      userInfo: userInfoMsg.data,
    };
  },
  fetch({ store }) {
    store.commit("isHeader", true);
    store.commit("isFooter", true);
  },
  watch: {
    orderDetail: {
      handler(newVal) {
        if (newVal.yue_pay_status == 1) {
          this.current = 0;
        } else if (newVal.pay_weixin_open) {
          // this.current = 1;
        } else if (newVal.ali_pay_status) {
          // this.current = 2;
        }
      },
      deep: true,
      immediate: true,
    },
  },
  head() {
    return {
      title: "支付-" + this.$store.state.titleCon,
    };
  },
  created() { },
  mounted() {
    this.$nextTick(() => {
      // 確保頁面從頂部開始顯示
      window.scrollTo(0, 0);
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      // 延遲再次滾動，確保DOM完全渲染後生效
      setTimeout(() => {
        window.scrollTo(0, 0);
        document.documentElement.scrollTop = 0;
        document.body.scrollTop = 0;
      }, 50);
    });
  },
  methods: {
    currentPay(index) {
      this.current = index;
      if (index === 1) {
        // 微信支付需要选择货币
        this.currentPaymentType = 'wechat';
        this.showCurrencyModal = true;
        this.tempCurrency = this.selectedCurrency || '';
      } else if (index === 2) {
        // 支付宝支付需要选择货币
        this.currentPaymentType = 'alipay';
        this.showCurrencyModal = true;
        this.tempCurrency = this.selectedCurrency || '';
      } else if (index === 3) {
        // 银联支付直接跳转
        this.$router.push({
          path: "/unionPay",
          query: {
            orderId: this.orderId,
            totalPrice: this.orderDetail.pay_price,
          },
        });
      }
    },
    selectCurrency(currency) {
      this.tempCurrency = currency;
    },
    confirmCurrency() {
      if (this.tempCurrency) {
        this.selectedCurrency = this.tempCurrency;
        this.showCurrencyModal = false;

        // 根据支付类型跳转到相应页面
        const path = this.currentPaymentType === 'wechat' ? '/wxPay' : '/alipay';
        this.$router.push({
          path: path,
          query: {
            orderId: this.orderId,
            totalPrice: this.orderDetail.pay_price,
            currency: this.selectedCurrency
          },
        });
      }
    },
    closeCurrencyModal() {
      this.showCurrencyModal = false;
      this.tempCurrency = '';
      this.currentPaymentType = '';
      // 取消当前选择
      this.current = null;
    },
    goPay() {
      let that = this;
      if (
        this.current === 0 &&
        parseFloat(that.userInfo.now_money) <
        parseFloat(that.orderDetail.pay_price)
      )
        return that.$message.error("余額不足");
      that.$axios
        .post("/order/pay", {
          uni: that.orderId,
          paytype: "yue",
          from: "pc",
        })
        .then((res) => {
          that.$message.success(res.msg);
          that.$store.commit("cartNum", 0);
          that.getOrderCoupon(that.orderId);
          setTimeout(function () {
            that.$router.push({
              path: "/order_detail",
              query: { orderId: that.orderId },
            });
          }, 1000);
        })
        .catch((err) => {
          that.$message.error(err);
          setTimeout(function () {
            that.$router.push({ path: "/" });
          }, 1000);
        });
    },
    //支付成功發送優惠券；
    getOrderCoupon(orderId) {
      let that = this;
      that.$axios.post("/v2/order/product_coupon/" + orderId).then((res) => { });
    },
  },
};
</script>

<style scoped lang="scss">
@import '@/assets/css/variables.scss';

.payment {
  padding-top: 100px;

  .orderTip {
    padding: 55px 30px 31px 30px;
    font-size: 32px;
    color: #fff;
    width: 1200px;
    height: 159px;
    background: url("../assets/images/orderBg.png") no-repeat;
    background-size: 100% 100%;

    .times {
      font-size: 14px;
      margin-top: 12px;
    }
  }

  .detail {
    width: 100%;
    height: 182px;
    background-color: var(--card-bg);
    padding: 31px 30px;
    transition: background-color 0.3s ease;

    .item {
      font-size: 16px;

      &~.item {
        margin-top: 12px;
      }
    }
  }

  .payType {
    width: 100%;
    height: 387px;
    background-color: var(--card-bg);
    margin-top: 17px;
    transition: background-color 0.3s ease;

    .title {
      height: 57px;
      padding: 0 30px;
      border-bottom: 1px dotted var(--border-color);
      line-height: 57px;
      font-size: 18px;
      transition: border-color 0.3s ease;
    }

    .type {
      padding: 22px 50px 55px 30px;

      .item {
        width: 210px;
        height: 86px;
        border: 1px solid var(--border-color);
        position: relative;
        cursor: pointer;
        transition: border-color 0.3s ease;

        &~.item {
          margin-left: 20px;
        }

        &.on {
          border-color: $primary-base;
        }

        .iconfont,
        .icon {
          color: #09bb07;
          font-size: 29px;
          margin-right: 11px;

          &.icon-yue {
            font-size: 32px;
            color: #fe9c01;
          }
        }

        .icon-xuanzhong4 {
          position: absolute;
          right: -4px;
          bottom: -4px;
          margin: 0 !important;
        }

        .name {
          font-size: 16px;
          color: var(--text-white);
          transition: color 0.3s ease;
        }

        .yue {
          font-size: 14px;
          color: var(--text-white);
          margin-top: 6px;
          transition: color 0.3s ease;
        }
      }
    }

    .goPay {
      margin: 80px 50px 0 0;

      .bnt {
        width: 180px;
        height: 46px;
        font-size: 16px;
        color: #fff;
        border-radius: 4px;
        text-align: center;
        line-height: 46px;
        cursor: pointer;
      }
    }

    .icon-zhifubao:before {
      color: #00aaea;
    }

    .icon-yinlian:before {
      color: #0066b8;
    }
  }

  // 货币选择弹窗样式
  .currency-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;

    .currency-modal {
      background: var(--card-bg);
      border-radius: 8px;
      width: 90%;
      max-width: 500px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      overflow: hidden;
      transition: background-color 0.3s ease;

      .modal-header {
        padding: 20px 25px;
        border-bottom: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--secondary-color);
        transition: background-color 0.3s ease, border-color 0.3s ease;

        h3 {
          margin: 0;
          font-size: 18px;
          font-weight: 600;
          color: var(--text-primary);
          transition: color 0.3s ease;
        }

        .close-btn {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          background: var(--card-bg);
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          font-size: 18px;
          color: var(--text-secondary);
          transition: all 0.3s ease;
          border: 1px solid var(--border-color);

          &:hover {
            background: var(--secondary-color);
            color: var(--text-primary);
          }
        }
      }

      .modal-body {
        padding: 25px;

        .currency-option {
          border: 2px solid var(--border-color);
          border-radius: 6px;
          padding: 18px;
          margin-bottom: 12px;
          cursor: pointer;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          justify-content: space-between;

          &:last-child {
            margin-bottom: 0;
          }

          &:hover {
            border-color: $primary-base;
            background: var(--hover-color);
          }

          &.active {
            border-color: $primary-base;
            background: var(--hover-color);
          }

          .currency-info {
            .currency-name {
              font-size: 16px;
              font-weight: 600;
              color: var(--text-primary);
              margin-bottom: 4px;
              transition: color 0.3s ease;
            }

            .currency-desc {
              font-size: 13px;
              color: var(--text-secondary);
              transition: color 0.3s ease;
            }
          }

          .currency-icon {
            font-size: 18px;
            color: $primary-base;
            font-weight: bold;
          }
        }
      }

      .modal-footer {
        padding: 18px 25px;
        border-top: 1px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
        background: var(--secondary-color);
        transition: background-color 0.3s ease, border-color 0.3s ease;

        button {
          padding: 10px 20px;
          border-radius: 4px;
          font-size: 14px;
          font-weight: 500;
          cursor: pointer;
          transition: all 0.3s ease;
          border: none;
        }

        .cancel-btn {
          background: var(--secondary-color);
          color: var(--text-secondary);
          transition: background-color 0.3s ease, color 0.3s ease;

          &:hover {
            background: var(--border-color);
          }
        }

        .confirm-btn {
          background: $primary-base;
          color: #fff;

          &:hover {
            background: #d42918;
          }

          &:disabled {
            background: var(--disabled-color, #ccc);
            cursor: not-allowed;
            transition: background-color 0.3s ease;
          }
        }
      }
    }
  }
}
</style>
